
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<template>
  <div class="h100 p20 bg-white">
    <br>
    <br>
    <br>
    <br>
    <div v-if="!datas" class="p10">
      <van-field class="f16" clearable v-model="form.name" placeholder="请输入真实姓名"/>
      <br>
      <br>
      <van-field class="f16" clearable v-model="form.idCard" maxlength="20" placeholder="请输入身份证号"/>
      <br>
      <br>
      <van-button
        :loading="button.isLoginIng"
        loading-text="登录中..."
        class="mt20 b1 round"
        type="info"
        block
        :disabled="button.loginState"
        @click="submit"
      >{{button.loginState?"请填写表单":"提交资料"}}</van-button>
    </div>
    <div v-else class="abs bg-white p20" style="top:0;bottom:0;left:0;right:0;">
      <div class="p20 round b1 cfff">
        <h3 class="f18">张三</h3>
        <p class="mt10 f14">3*****************9</p>
        <div style="height:1rem;"></div>
        <div class="f j-b">
          <p>个人隐私信息安全保障中</p>
          <p>信息有误?</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { verified, verifiedView } from "@/http/api";
export default {
  data() {
    return {
      form: {
        name: null,
        idCard: null
      },
      button: {
        isLoginIng: false,
        loginState: true
      },
      datas: {}
    };
  },
  watch: {
    form: {
      handler(newName) {
        if (newName.name && newName.idCard) {
          this.button.loginState = false;
        } else {
          this.button.loginState = true;
        }
      },
      deep: true
    }
  },
  created() {
    this.getVerifiedView(); //查询实名信息
  },
  methods: {
    getVerifiedView() {
      verifiedView().then(res => {
        if (res.code === 200) {
          if (res.result) {
            this.datas = res.result;
          } else {
            this.datas = res.result;
          }
        }
      });
    },
    submit() {
      verified(this.form).then(res => {
        console.log(res);
      });
    }
  }
};
</script>

